<template>
  <div class="container">
    <div class="banner">
      <img
        src="http://www.juyike.cn/Public/Home/images/img_con/dcyk.jpg"
        alt="多彩聚益科"
      />
      <h2>多彩聚益科</h2>
    </div>
    <div class="doc">
      <p class="state">
        是否每天忙碌的工作、两点一线的生活让你觉得倍感枯燥疲惫？如果是这样，你一定要来聚益科看看，这里有青春洋溢的美女帅哥，在这里我们感受快乐，在这里我们相识相知，不同的主题活动让你high不停，快随我一起来看看吧。
      </p>
      <ul>
        <li @click="details('life')">
          <a href="javascript:void(0);"
            ><span>社团生活</span
            ><img
              src="http://www.juyike.cn/Public/uploads/Activity/5e7cc0847e085.jpg"
          /></a>
        </li>
        <li @click="details('subbata')">
          <a href="javascript:void(0);"
            ><span>善行者</span
            ><img
              src="http://www.juyike.cn//Public/uploads/Activity/5e7cc0847e085.jpg"
          /></a>
        </li>
        <li @click="details('festival')">
          <a href="javascript:void(0);"
            ><span>节日团建</span
            ><img
              src="http://www.juyike.cn//Public/uploads/Activity/5e7cc0847e085.jpg"
          /></a>
        </li>
        <li @click="details('activities')">
          <a href="javascript:void(0);"
            ><span>年会活动</span
            ><img
              src="http://www.juyike.cn//Public/uploads/Activity/5e7cc0847e085.jpg"
          /></a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { Colourful_list } from '@/api/index.js';
export default {
  data() {
    return {
      enterpricedata:[],
    };
  },
  created() {
    this.getData();
    
  },
  methods: {
     
    // 获取数据
    getData() {
      const data={id:'2698202105191705264'}
      
      Colourful_list(data).then(res=> {
            console.log(res.data,'多彩聚益科');
          this.enterpricedata = res.data
      })
      .catch(error=>{
          console.log(error)
      });
    },
    details(type) {
      this.$router.push({ path: "/details", query: { type: type } });
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  width: 78.5%;
  left: 12.5%;
  position: absolute;
  top: 0;
  min-width: 1050px;
  max-width: 1200px;
  box-shadow: 5px 0 5px #f0f0f0;
  font-family: "微软雅黑";
  .banner {
    width: 100%;
    position: relative;
    img {
      width: 100%;
    }
    h2 {
      font-weight: 500;
      color: #fff;
      opacity: 0.7;
      font-size: 42px;
      line-height: 42px;
      position: absolute;
      left: 25px;
      top: 40%;
    }
  }
  .doc {
    padding: 0 0 50px 30px;
    .state {
      padding: 45px 0 20px;
      width: 80%;
      margin: 0 auto;
      font-size: 16px;
      text-indent: 30px;
      color: #666;
    }
    ul {
      margin: 0 0 0 11%;
      width: 88%;
      li {
        width: 38%;
        float: left;
        margin: 2% 3%;
        padding: 0;
        list-style: none;
        border: none;
        a {
          padding: 15px;
          background: #eee;
          border: 1px solid #eee;
          display: block;
          text-decoration: none;
          span {
            font-weight: bold;
            color: #ee020d;
            font-size: 16px;
          }
          img {
            max-width: 486px;
            margin-top: 3px;
            height: 210px;
            width: 100%;
          }
        }
        a:hover {
          background: #fff;
          border-color: #dcdcdc;
        }
      }
    }
  }
}
</style>
